<template>
    <div class="chapter">
        <Header></Header>
        <!-- 主体 -->
        <div class="main-box">
            <div class="header">
                <h3 class="title">模拟考试</h3>
                <el-breadcrumb class="other">
                    <el-breadcrumb-item :to="{ path: '/studyCenter' }">学习中心</el-breadcrumb-item>
                    <el-breadcrumb-item>模拟考试</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="content">
                <el-table class="list-table" :data="tableData" stripe style="width: 100%">
                    <el-table-column prop="date" label="试卷名称">
                        <template slot-scope="scope">
                            <span class="scope-icon">精选</span>
                            <span style="margin-left: 10px">{{ scope.row.name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="更新时间" width="180">
                        <template slot-scope="scope">
                            <div style="text-align:center;">{{ scope.row.date }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="完成度" width="120">
                        <template slot-scope="scope">
                            <div style="text-align:center;">{{ scope.row.completeness }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button
                                @click="handleChapterItemClick(scope.row)"
                                type="text"
                                size="small"
                                class="operateBtn"
                            >进入考试</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="content-footer">
                    <el-pagination
                        :current-page="currentPage"
                        :page-size="pageSize"
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :total="total"
                    ></el-pagination>
                    <div class="recordSum">共{{total}}条记录</div>
                </div>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>
<style lang="scss" scoped>
.chapter {
  background-image: url();
  .main-box {
    //列表盒子
    .content {
      //列表内容
      .list-table {
        .scope-icon {
          padding: 2px 8px;
          background-color: #f37b1d;
          border-radius: 2px;
          color: #fff;
          font-size: 10px;
          font-weight: bold;
        }
      }
      .operateBtn {
        padding: 8px 12px;
        color: #fff;
        background-color: #3bb4f2;
        border-color: #3bb4f2;
        border-radius: 14px;
      }
      .list-table {
        .has-gutter tr th {
          background: #f9f9f9;
          border-top: 1px solid #ddd;
          border-bottom: 1px solid #ddd;
          .cell {
            color: #333;
            text-align: center;
          }
        }
      }
      .content-footer {
        .recordSum {
          color: #999;
          font-size: 14px;
        }
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    width: 1210px;
    margin: 30px auto;
    padding: 10px 20px;
    background: white;
    box-shadow: 0px 0px 6px #888888;
    .header {
      //列表头部
      padding-top: 26px;
      display: flex;
      align-items: center;
      .title {
        font-weight: 600;
        font-size: 20px;
      }
      .other {
        margin: -8px 0 0 20px;
        .el-breadcrumb__item:last-child .el-breadcrumb__inner,
        .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
        .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
        .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
          color: #0e90d2;
        }
        .is-link {
          color: #0e90d2;
        }
      }
    }
  }
}
// 修改element 样式
.el-pager li.active {
  background-color: #409eff;
  cursor: default;
  color: white !important;
}
.el-pager li {
  border: 1px solid #ccc;
  margin-right: 5px !important;
}
.el-pager li.active + li {
  border: 1px solid #ccc !important;
}

</style>
<script>
import Header from "../../../components/common/header.vue";
import Footer from "../../../components/common/footer.vue";
export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      currentPage: 1, //当先页
      pageSize: 8, //一次几条
      total: 20, //总共条数
      tableData: [
        //表数据
        {
          date: "2019-05-14 10:26:27",
          name: "模拟试卷一(2019)",
          completeness: "13 / 26	"
        },
        {
          date: "2019-05-14 19:29:01",
          name: "模拟试卷二(2019)",
          completeness: "0 / 26"
        },
        {
          date: "2019-05-14 11:38:08",
          name: "模拟试卷三(2019)",
          completeness: "0 / 26"
        },
        {
          date: "2019-05-15 15:51:12",
          name: "模拟试卷四(2019)",
          completeness: "0 / 26"
        }
      ]
    };
  },
  methods: {
    handleCurrentChange(currentIdx) {
      console.log(currentIdx);
    },
    handleChapterItemClick(idx) {
        console.log('exam')
      console.log(idx);
      this.$router.push({
        path: "/enter",
        params: {
          id: 1
        }
      });
    }
  }
};
</script>


